// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Command Bar styles

@CommandBar-height: 40px;
@CommandBar-mobileHeight: 48px;
@CommandBar-iconSize: 18px;
@CommandBar-smallLeft: 44px;
@CommandBar-largeLeft: 48px;
@CommandBar-xLargeLeft: 232px;
@CommandBar-sideAreaWidthsm: 128px;
@CommandBar-sideAreaWidthlg: 260px;
@CommandBar-sideAreaWidthxlg: 345px;

@CommandBarItem-height: @CommandBar-height;
@CommandBarItem-marginTop: 13px;
@CommandBarItem-textHeight: 16px;
@CommandBarItem-iconWidth: 16px;
@CommandBarItem-iconLabelMargin: 8px;
@CommandBarItem-flippedLineHeight: 32px;


@SearchBox-height: 40px;
@SearchBox-widthLgCollapsed: 40px;
@SearchBox-widthMdDownCollapsed: 36px;
@SearchBox-widthXLarge: 208px;
@SearchBox-iconSize: 17px;
@SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons
@SearchBox-smallWidth: 36px;  

.highContrastBorder(@color) {
    border-left: 1px solid @color;
    border-right: 1px solid @color;
}

.ms-CommandBar {
  background-color: @ms-color-themeLighterAlt;
  height: @CommandBar-height;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 15px;
  border: 0;
  position: relative;

  &:focus {
    outline: none;
  }
}

.ms-CommandBar-mainArea {
  overflow-x: hidden;
  display: block;
}

.ms-CommandBar-sideCommands {
  float: right;
  text-align: right;
  width: auto;

  @media only screen and (min-width: @ms-screen-md-min) {
    min-width: @CommandBar-sideAreaWidthsm;
  }
}

// Command Bar Item
.ms-CommandBarItem {
  display: inline-block;
  margin-right: 8px;
  color: @ms-color-themePrimary;
  height: @CommandBarItem-height;
  outline: none;
  vertical-align: top;

  .ms-CommandBarItem-chevronDown,
  .ms-CommandBarItem-commandText {
    display: none;
  }

  @media screen and (-ms-high-contrast: active) {
    .highContrastBorder(@ms-color-black);
    height: 38px;
    outline: none;
  }

  @media screen and (-ms-high-contrast: black-on-white) {
    .highContrastBorder(@ms-color-white);
    height: 38px;
    outline: none;
  }
  
  &:hover {
    background-color: @ms-color-themeLight;
    color: @ms-color-themePrimary;

    @media screen and (-ms-high-contrast: active) {
      .highContrastBorder(@ms-color-white);
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      .highContrastBorder(@ms-color-black);
    }
  }

  // Hide labels and Chevrons SM-MD
  @media only screen and (min-width: @ms-screen-lg-min) {
    .ms-CommandBarItem-chevronDown,
    .ms-CommandBarItem-commandText {
      display: inline;
    }
  }

}

.ms-CommandBarItem.is-hidden {
  display: none;
}
  
//== Modifier: For commands with only an icon
//
.ms-CommandBarItem.icon-only,
.ms-CommandBarItem.ms-CommandBarItem--iconOnly {
  .ms-CommandBarItem-chevronDown,
  .ms-CommandBarItem-commandText {
    display: none;
  }
}

.ms-CommandBarItem-overflow {
  display: none;

  &.is-visible {
    display: inline-block;
  }
}

.ms-CommandBarItem-link {
  line-height: @CommandBarItem-height - 1;
  padding: 0 6px;
  cursor: pointer;
  height: @CommandBarItem-height;
  min-width: 22px;
  text-align: center;
  position: relative;
  padding: 0 6px;

  @media only screen and (min-width: @ms-screen-lg-min) {
    padding-right: 8px;
    padding-left: 6px;
  }
}

.ms-CommandBarItem-chevronDown  {
  vertical-align: top;
  padding-bottom: 3px;
  margin-top: @CommandBarItem-marginTop;
  font-size: 1.1em;
  line-height: 1em;
  color: @ms-color-neutralSecondary;

  &:before {
    height: 10px;
    line-height: @CommandBarItem-textHeight;
  }
}

.ms-CommandBarSearch {
  float: left;
  width: 208px;
  max-width: 208px;
  background-color: @ms-color-themeLighter;
  color: @ms-color-neutralPrimary;
  height: @SearchBox-height;
  position: relative;
  box-sizing: border-box;
  border-color: transparent; // give a base state for animation

  @media only screen and (max-width: @ms-screen-md-max) {
    overflow: hidden;
    background-color: transparent;
    width: @SearchBox-widthLgCollapsed;
  }

  transition: @ms-duration3 @ms-ease1;
  transition-property: width, background-color;

  @media screen and (-ms-high-contrast: active) {
    border-right: 1px solid @ms-color-white;
    z-index: 10;
  }

  @media screen and (-ms-high-contrast: black-on-white) {
    border-right: 1px solid @ms-color-black;
  }

  .ms-Icon--search {
    margin-left: 2px;
    margin-top: 12px;
    vertical-align: top;
  }
}

.ms-CommandBarSearch-input {
  height: @SearchBox-height;
  // Due to a bug in IE9, we have to use a transparent left border instead of left padding
  padding: @SearchBox-sidePadding @SearchBox-sidePadding @SearchBox-sidePadding 0;
  border: none;
  border-left: @SearchBox-height + 2 solid transparent;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  font-size: @ms-font-size-m;

  @media screen and (-ms-high-contrast: active) {
    border-left: @SearchBox-height solid @ms-color-black;
  }

  @media screen and (-ms-high-contrast: black-on-white) {
    border-left: @SearchBox-height solid @ms-color-white;
  }

  // remove default iOS styles on input boxes
  -webkit-appearance: none;
  -webkit-border-radius: 0;

  // hide IE's X button for clearing the input (we have our own)
  &::-ms-clear {
    display: none;
  } 

  //Placeholder text styles
  &::placeholder {
    color: @ms-color-neutralPrimary;
    opacity: 1;
    font-size: @ms-font-size-m;
  }

  //Fixes older firefox issue.
  &:placeholder {
    color: @ms-color-neutralPrimary;
    opacity: 1;
    font-size: @ms-font-size-m;
  }
}

// default styles for icons, show the search icon and hide X (and arrow) until focused
.ms-CommandBarSearch-iconSearchWrapper {
  display: block;
  padding-left: 15px;
}

.ms-CommandBarSearch-iconArrowWrapper {
  display: none;
}

.ms-CommandBarSearch-iconSearchWrapper,
.ms-CommandBarSearch-iconArrowWrapper {
  top: 0;
  padding-left: 8px;
  padding-right: 8px;  
}

.ms-CommandBarSearch-iconClearWrapper {
  display: none;
  top: 1px;
  right: 0px;
  z-index: @ms-zIndex-front;
}


//== State: Puts search in an active state
//
.ms-CommandBarSearch.is-active {
  background-color: @ms-color-themeLight;
  color: @ms-color-black;

  @media only screen and (max-width: @ms-screen-md-max) {
    width: 100%;
    position: absolute;
    z-index: @ms-zIndex-front;
    max-width: 100%;
  }

  &:hover {
    background-color: @ms-color-themeLight;
    color: @ms-color-black;
  }
  
  .ms-CommandBarSearch-input {
    cursor: text;
    padding-right: @SearchBox-height; // leave room for the X
    border-left-width: @SearchBox-sidePadding;
  }

  &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
    border-left-width: @SearchBox-height; // leave room for arrow
  }

  // when focused, remove the search icon and possibly show arrow icon
  & .ms-CommandBarSearch-iconSearchWrapper {
    display: none;
  }

  &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
    display: block;
  }

  .ms-CommandBarSearch-input {
    padding-right: @SearchBox-height;
  }

  .ms-CommandBarSearch-iconClearWrapper {
    display: block;
  }
}

.ms-CommandBarSearch-iconWrapper {
  height: @SearchBox-height;
  line-height: @SearchBox-height;
  cursor: pointer;
  padding: 0px @SearchBox-sidePadding;
  position: absolute;
}

.ms-CommandBarSearch .ms-Icon:before {
  font-size: @SearchBox-iconSize;
  color: @ms-color-themePrimary;
}

